<template>
    <div class="main">
        <div class="search">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>教工号码查询</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="search1">
                <el-input v-model="userId" placeholder="请输入教工号" prefix-icon="el-icon-search"  v-on:click.native="demon"></el-input>
            </div>
        </div>
        <div class="table1">
            <el-table
              :data="tableData"
              @cell-click="handle"
              border
              :header-cell-style="tableHeaderColor"
              :cell-style="columnStyle"
              style="width: 100%">
              <el-table-column
                type="index"
                width="100"
                heigth="80"
                label="沐沐课程表"
                align="center"
                background="#D3DCE6"
                :index="indexMethod">
              </el-table-column>
              <el-table-column
                label="星期一"
                prop="week1.week"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop="week2.week"
                label="星期二"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop="week3.week"
                label="星期三"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop="week4.week"
                label="星期四"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop="week5.week"
                label="星期五"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop="week6.week"
                label="星期六"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop="week7.week"
                label="星期日"
                header-align="center"
                align="center"
                width="150">
              </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="200" @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableAll: [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
      tableAll2: [[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], []],
      tableData: [{
        week1: {},
        week2: {},
        week3: {},
        week4: {},
        week5: {},
        week6: {},
        week7: {}
      }, {
        week1: {},
        week2: {},
        week3: {},
        week4: {},
        week5: {},
        week6: {},
        week7: {}
      }, {
        week1: {},
        week2: {},
        week3: {},
        week4: {},
        week5: {},
        week6: {},
        week7: {}
      }, {
        week1: {},
        week2: {},
        week3: {},
        week4: {},
        week5: {},
        week6: {},
        week7: {}
      }, {
        week1: {},
        week2: {},
        week3: {},
        week4: {},
        week5: {},
        week6: {},
        week7: {}
      }],
      obj: {},
      alert: {},
      sectionlist: ['1-2', '3-4', '5-6', '7-8', '9-10'],
      userId: '',
      currentPage: ''
    }
  },
  created () {
  },
  methods: {
    async demon () {
      for (let i = 0; i < this.tableAll.length; i++) {
        this.tableAll[i].splice(0, this.tableAll[i].length)
      }
      await this.$http.get(
        '/arrange/findAll',
        {
          userId: this.userId
        },
        { 'Content-Type': 'application/json' }
      ).then(res => {
        for (let i = 0; i < 20; i++) {
          for (let j = 0; j < res.data.datas.AllArrange.length; j++) {
            if (res.data.datas.AllArrange[j].week === i + 1) {
              this.tableAll[i].push(res.data.datas.AllArrange[j])
            }
          }
        }
        for (let i = 0; i < this.tableAll[0].length; i++) {
          const tday = this.tableAll[0][i].day
          const tsection = this.tableAll[0][i].section - 1
          this.obj = {
            coursename: this.tableAll[0][i].course,
            teacher: this.tableAll[0][i].user,
            teacherid: this.tableAll[0][i].userid,
            class: this.tableAll[0][i].iclass,
            classroom: this.tableAll[0][i].laboratory,
            calssroomtype: this.tableAll[0][i].laboratoryId,
            week: this.tableAll[0][i].week,
            day: this.tableAll[0][i].day,
            section: this.tableAll[0][i].section
          }
          switch (tday) {
            case 1:
              this.tableData[tsection].week1 = this.obj
              break
            case 2:
              this.tableData[tsection].week2 = this.obj
              break
            case 3:
              this.tableData[tsection].week3 = this.obj
              break
            case 4:
              this.tableData[tsection].week4 = this.obj
              break
            case 5:
              this.tableData[tsection].week5 = this.obj
              break
            case 6:
              this.tableData[tsection].week6 = this.obj
              break
            default:
              this.tableData[tsection].week7 = this.obj
              break
          }
        }
        this.userId = ''
      })
    },
    current_change: function (currentPage) {
      for (let j = 0; j < this.tableData.length; j++) {
        for (var key in this.tableData[j].week1) {
          this.tableData[j].week1[key] = ''
        }
        for (var key1 in this.tableData[j].week2) {
          this.tableData[j].week2[key1] = ''
        }
        for (var key2 in this.tableData[j].week3) {
          this.tableData[j].week3[key2] = ''
        }
        for (var key3 in this.tableData[j].week4) {
          this.tableData[j].week4[key3] = ''
        }
        for (var key4 in this.tableData[j].week5) {
          this.tableData[j].week5[key4] = ''
        }
        for (var key5 in this.tableData[j].week6) {
          this.tableData[j].week6[key5] = ''
        }
        for (var key6 in this.tableData[j].week7) {
          this.tableData[j].week7[key6] = ''
        }
      }
      currentPage = currentPage - 1
      for (let i = 0; i < this.tableAll[currentPage].length; i++) {
        const tday = this.tableAll[currentPage][i].day
        const tsection = this.tableAll[currentPage][i].section - 1
        this.obj = {
          coursename: this.tableAll[currentPage][i].course,
          teacher: this.tableAll[currentPage][i].user,
          teacherid: this.tableAll[currentPage][i].userid,
          class: this.tableAll[currentPage][i].iclass,
          classroom: this.tableAll[currentPage][i].laboratory,
          calssroomtype: this.tableAll[currentPage][i].laboratoryId,
          week: this.tableAll[currentPage][i].week,
          day: this.tableAll[currentPage][i].day,
          section: this.tableAll[currentPage][i].section
        }
        switch (tday) {
          case 1:
            this.tableData[tsection].week1 = this.obj
            break
          case 2:
            this.tableData[tsection].week2 = this.obj
            break
          case 3:
            this.tableData[tsection].week3 = this.obj
            break
          case 4:
            this.tableData[tsection].week4 = this.obj
            break
          case 5:
            this.tableData[tsection].week5 = this.obj
            break
          case 6:
            this.tableData[tsection].week6 = this.obj
            break
          default:
            this.tableData[tsection].week7 = this.obj
            break
        }
      }
    },
    indexMethod (index) {
      return this.sectionlist[index]
    },
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500;font-size: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);color: #303133;opacity: 0.8;'
      } else {
        return 'font-weight: 500;font-size: 20px;'
      }
    },
    columnStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'height: 80px;background-color: lightblue;color: #fff;font-weight: 500;font-size: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);color: #303133;opacity: 0.8;'
      } else {
        return 'box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);font-weight: 500;font-size: 18px;'
      }
    },
    handle (row, column, event, cell) {
      const temp = parseInt(column.id[18]) - 1
      switch (temp) {
        case 1:
          this.alert = row.week1
          break
        case 2:
          this.alert = row.week2
          break
        case 3:
          this.alert = row.week3
          break
        case 4:
          this.alert = row.week4
          break
        case 5:
          this.alert = row.week5
          break
        case 6:
          this.alert = row.week6
          break
        case 7:
          this.alert = row.week7
          break
        default:
          break
      }
      if (typeof (this.alert.coursename) !== 'undefined' && this.alert.coursename !== '') {
        this.$alert('课程基本信息' + '</br>' + '课程名称：' + this.alert.coursename + '</br>' + '任课教师: ' + this.alert.teacher + '</br>' + '教工号: ' + this.alert.teacherid + '</br>' +
        '上机班级: ' + this.alert.class + '</br>' + '上机教室: ' + this.alert.classroom + '</br>' + '教室类型: ' + this.alert.calssroomtype + '</br>' +
        '上机周数: ' + this.alert.week + '</br>' + '周几: ' + this.alert.day + '</br>' + '上机节数: ' + this.alert.section, { dangerouslyUseHTMLString: true }, {
          confirmButtonText: '确定'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main{
    height: 100%;
    width: 100%;
    overflow: auto;
    .search{
        height: 8%;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        .search1{
            width: 20%;
            position: relative;
            top: 0%;
            left: 65%;
        }
        .el-breadcrumb{
          position: relative;
          top: 5px;
        }
    }
    .table1{
        height:72%;
        width: 70%;
        overflow: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,0);
        position: relative;
        top: 50px;
        .el-table{
          width: 100%;
        }
        .el-pagination{
            position: relative;
            top: 40px;
        }
    }
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
